<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的使用</title>
		<style>
			[v-clock]{
				display: none;
				/* 只要是这个属性的都隐藏 */
			}
		</style>
		<script src="vue.min.js"></script>
	</head>
	<body>
		<!-- vue实例控制的这个元素就是V  MVVM 中的V -->
		<div id="app">
			<!-- v-cloak可以解决插值表达式闪烁的问题 -->
			<p v-cloak>++++{{msg}}---</p>
			<h4 v-text="msg">=====</h4>
			<!-- 默认v-text是没有闪烁问题的 -->
			<!--  v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个内容的元素清空 -->
			<div>{{msg2}}</div>
			<div  v-text="msg2"></div>
			<!-- 上面两个只会当作文本输出 -->
			<div v-html="msg2"></div>
			<!-- v-bind是vue中提供的用于绑定的指令 -->
			<!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'"> -->
			<!-- 在用v-bind可以用变量加表达式 -->
			<!-- v-bind可以简写为：要绑定的属性 ，里面可以写合法的js表达式-->
            <!-- vue中提供了v-on事件绑定机制 -->
			 <!-- <input type="button" value="按钮" :title="mytitle + '123'" id="btn" v-on:click="alert('hello')"> -->
            <!-- <input type="button" value="按钮" v-on:click="show"> -->
            <!-- 鼠标覆盖事件 -->
            <!-- <input type="button" value="按钮" v-on:mouseover="show"> -->
            <input type="button" value="按钮" @click="show">
            </div>
		
		<script >
			
			// new出来的vm 对像 就是MVVM中的VM调度者
            // el控制指定区域，data控制属性
			new Vue({
                el: "#app",
                data() {
                return {
                msg: "123",
				msg2:'<h1>我是大的h1</h1>',
				mytitle:'这是一个自己定义的title'
                }
                },
                methods:{
                    // 这个method定义了当前vue中实例所有可用的方法
                    show:function(){
                        alert('hello')
                        // 每当促发input的点击事件，调用vue的事件绑定机制，执行show方法，会从methods中找show方法
                    }
                }
            });
                // document.getElementById('btn').onclick=function(){
                //     alert("hello")
                // }

			// ({
			// el:'#app',	
			
			// // data就是里面的M，用来保存每个页面的数据
			// 	data:{
			// 		msg:'Hello'
			// 	}
			// });
			
		</script>
	</body>
</html>

<!-- 1.如何定义vue的代码结构 -->
<!-- 2.插值表达式和v-text -->
<!-- 3.v-cloak -->
<!-- 4.v-html -->
<!-- 5.v-bind vue提供的属性绑定机制  缩写是  ： -->
<!-- 6.v-on  vue提供的事件绑定机制  缩写是  @ -->
